<template>
	<div :id="id" class="echarts" style="height: 356px;" />
</template>

<script>
	export default {
		name: '',
		components: {},
		mixins: [],
		props: {
			echartsData: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				id: `echarts${Number(Math.random().toString().substr(3, 3) + Date.now()).toString(36)}`,
				myEchart: null
			}
		},
		computed: {},
		watch: {
			echartsData: {
				handler: function() {
					this.$nextTick(() => {
						this.dram()
					})
				},
				immediate: true,
				deep: true
			}
		},
		created() {},
		mounted() {},
		methods: {
			dram() {
				if (this.myEchart != null && this.myEchart !== '' && this.myEchart !== undefined) {
					this.myEchart.dispose() // 销毁
				}
				const color = ['rgba(237, 90, 77, 1)', 'rgba(255, 255, 255, 1)']
				const colorList = [
					[{
						offset: 0,
						color: 'rgba(237, 90, 77, 1)'
					}, {
						offset: 1,
						color: 'rgba(255, 255, 255, 1)'
					}],
					[{
						offset: 0,
						color: 'rgba(177, 77, 70, .2)'
					}, {
						offset: 1,
						color: 'rgba(177, 77, 70, 0)'
					}]
				]

				var option = {
					grid: {
						top: '10%',
						left: '3%',
						right: '3%',
						bottom: '10%',
						containLabel: true
					},
					color: color,
					legend: {
						show: true,
						icon: 'roundRect',
						itemWidth: 16,
						itemHeight: 8,
						right: '0',
						top: '0',
						textStyle: {
							color: '#fff',
							fontStyle: 'normal',
							fontFamily: '微软雅黑',
							fontSize: 12
						}
					},
					// dataZoom: [
					//   {
					//     type: 'slider',
					//     show: true,
					//     xAxisIndex: [0],
					//     start: 0,
					//     end: 40,
					//     height: 10,
					//     bottom: 10
					//   }
					// ],
					tooltip: {
						trigger: 'axis',
						backgroundColor: 'rgba(0, 0, 0, .8)',
						borderColor: 'rgba(0, 0, 0, .8)',
						textStyle: {
							color: '#fff',
							fontSize: 14
						}
					},
					xAxis: {
						type: 'category',
						name: '',
						nameTextStyle: {
							color: '#6e9fbf'
						},
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E9E9E9'
							}
						},
						axisLabel: {
							color: '#34446E',
							fontSize: 12,
							interval: 0,
							rotate: 0
						},
						data: this.echartsData.sData
					},
					yAxis: {
						type: 'value',
						name: '',
						nameTextStyle: {
							color: '#6e9fbf'
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255, 255, 255, .2)'
							}
						},
						axisLabel: {
							color: '#34446E',
							fontSize: 12
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E9E9E9'
							}
						},
						boundaryGap: ["0%", "20%"]
					},
					series: {
						name: '',
						type: 'line',
						smooth: true, // 是否平滑
						showAllSymbol: true,
						symbol: 'circle',
						symbolSize: 6,
						// label: {
						//   show: true,
						//   fontSize: 18,
						//   color: '#fff',
						//   position: 'top'
						// },
						lineStyle: {
							color: color[0],
							width: 2
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: colorList[0],
								globalCoord: false
							}
						},
						data: this.echartsData.xData,
						// wzyk 新增，加上浮动标签展示多少个数量
						markPoint: {
							data: [
								{
									name: '最新统计',
									value: this.echartsData.xData[this.echartsData.xData.length - 1],
									xAxis: 9,
									yAxis: this.echartsData.xData[this.echartsData.xData.length - 1]
								}
							],
							symbolSize: 90
						},
						// endLabel: {
						// 	show: true,
						// 	formatter: function(params) {
						// 		return params.value[3] + ': ' + params.value[0];
						// 	}
						// },
					}
				}
				this.myEchart = this.$echarts.init(document.getElementById(this.id))
				this.myEchart.setOption(option, true)
				window.addEventListener('resize', () => {
					this.myEchart.resize()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.h {
		position: relative;
		height: 100%;
	}

	.echarts {
		width: 100%;
		height: 100%;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 32px;
		z-index: -1;

		ul {
			li {
				width: 110px;
				height: 28px;
				background-color: #0a2d63;
				opacity: 0.55;

				&+li {
					margin-top: 1.5px;
				}
			}

			&::before {
				content: '';
				position: absolute;
				right: -471px;
				width: 466px;
				height: 265px;
				background-color: #0a2d63;
				opacity: 0.55;
			}
		}
	}
</style>